import { Form, Select } from "antd";
import CommonModal from "@/components/CommonModal";

const { Option } = Select;

//渲染交接员工
const renderSubUser = item => {
	if (item.name) {
		if (item.account) {
			return item.name + "(" + item.account + ")";
		} else {
			return item.name;
		}
	} else {
		return "";
	}
};

export default ({ visible, userData, handleOk, handleCancel }) => {
	const [form] = Form.useForm();

	const onOk = () => {
		form.validateFields().then(value => {
			handleOk(value.pickerId);
		});
	};

	return (
		<CommonModal visible={visible} title="批量指派" onCancel={handleCancel} onOk={onOk} minHeight={120}>
			<Form form={form}>
				<Form.Item label="拿货员" name="pickerId" rules={[{ required: true, message: "请先选择拿货员" }]}>
					<Select
						showSearch
						placeholder="请选择或者输入检索"
						optionFilterProp="children"
						filterOption={(input, option) => (option?.label ?? "").toLowerCase().includes(input.toLowerCase())}
					>
						{userData.map(item => {
							const content = renderSubUser(item);
							return (
								<Option value={item.id} key={item.id} label={content}>
									{content}
								</Option>
							);
						})}
					</Select>
				</Form.Item>
			</Form>
		</CommonModal>
	);
};
